<template>
  <div class="quick-navigation-list">
    <div class="quick-search">
      <div
        v-for="item in quickSearchData"
        :key="item.key"
        class="quick-search-item"
        :class="[activeNavigation == item.prop ? 'quick-search-item-checked' : '']"
        @click="quickSearchClick(item)"
      >
        <div class="quick-search-item-label">
          {{ item.label }}
          <a-tooltip
            content="状态长时间为待结算的ETC订单，可能存在进行中的通行"
            position="top"
            mini
            v-if="item.prop == 'waitSettlementTotal'"
          >
            <icon-question-circle />
          </a-tooltip>
        </div>
        <div class="quick-search-item-value" :class="[activeNavigation == item.prop ? 'quick-search-item-value-checked' : '']">
          {{ item.value }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import { getCountApi } from '@/api/order/etcOrder'
  const emit = defineEmits(['change'])
  // 快捷导航选中
  let activeNavigation = ref('total')
  const quickSearchData = ref([
    {
      key: 1,
      label: '全部ETC订单',
      prop: 'total',
      value: 0,
    },
    {
      key: 2,
      label: '已开始',
      prop: 'startTotal',
      value: 0,
    },
    {
      key: 3,
      label: '待结算',
      prop: 'waitSettlementTotal',
      value: 0,
    },
    {
      key: 4,
      label: '未关联订单',
      prop: 'noRelatedTotal',
      value: 0,
    },
  ])
  const getStNum = () => {
    getCountApi().then(({ result }) => {
      if (result) {
        quickSearchData.value.forEach((navigation) => {
          let prop = navigation.prop
          if (prop) {
            navigation.value = result[prop] || 0
          }
        })
      }
    })
  }
  getStNum()
  const quickSearchClick = (item) => {
    activeNavigation.value = item.prop
    let param = {}
    switch (item.label) {
      case '全部ETC订单':
        break
      case '已开始':
        param = {
          orderStatusList: [10],
        }
        break
      case '待结算':
        param = {
          orderStatusList: [20],
        }
        break
      case '未关联订单':
        param = {
          orderLabelList: ['未关联订单'],
        }
        break
    }
    emit('change', param)
  }

  const reset = () => {
    activeNavigation.value = 'total'
  }
  const clickActive = (item) => {
    activeNavigation.value = item
  }
  defineExpose({
    reset,
    getStNum,
    clickActive,
  })
</script>
<style lang="less" scoped>
  .quick-navigation-list {
    .quick-search {
      display: flex;
      margin-bottom: 20px;
    }
    .quick-search-item {
      width: 16%;
      height: 62px;
      padding: 9px 0 9px 16px;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      border: 1px solid #e5e8ef;
      position: relative;
      cursor: pointer;
    }
    .quick-search-item:hover {
      transform: scale(1.1);
      transition: transform 0.3s;
      position: relative;
      z-index: 999;
    }
    .quick-search-item-checked {
      background: #e8f3ff;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      border: 1px solid #1890ff;
    }
    .quick-search-item:nth-of-type(n + 2) {
      margin-left: 20px;
    }
    .quick-search-item-label {
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #4e5969;
    }
    .quick-search-item-value {
      font-size: 20px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1d2129;
    }
    .quick-search-item-value-checked {
      color: #1890ff;
    }
  }
  .navigation-icon {
    width: 14px;
    height: 14px;
    margin-left: 5px;
  }
</style>
